<template>
  <view class="container">
    <!-- 销售模块 -->
    <view class="module" v-show="saleAllAuth">
      <view class="module-header">销售</view>
      <view>
        <view class="sale-box" :border="false">
          <view v-for="(listItem,listIndex) in saleslist" @click="salesClick(listItem.path)" :key="listIndex">
            <image :src=listItem.url class="grid-image"></image>
            <text class="grid-text">{{ listItem.title }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 采购模块 -->
    <view class="module" v-show="purchaseAllAuth">
      <view class="module-header">采购</view>
      <view>
        <view class="purches-box" :border="false">
          <view v-for="(listItem,listIndex) in purlist" @click="purClick(listItem.path)" :key="listIndex">
            <image :src=listItem.url class="grid-image"></image>
            <text class="grid-text">{{ listItem.title }}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-if="!saleAllAuth && !purchaseAllAuth" class="no-data">
      <image :src="noDataAuth"></image>
      <view>暂时没有内容</view>
    </view>
  </view>
</template>

<script>
  import config from '@/config';
  import { getButtonShow } from '@/utils/common.js';

  export default {
    name: "index",
    data() {
      return {
        saleslist: [],
        purlist: [],
        salesDetailAuth: false,
        loggingAuth: false,
        purchaseAuth: false,
        salesReportAuth: false,
        purchaseReportAuth: false
      }
    },
    computed: {
      noDataAuth() {
        return config.baseImgUrl + '/no-data.png';
      },
      saleAllAuth() {
        return this.salesDetailAuth || this.salesReportAuth
      },
      purchaseAllAuth() {
        return this.loggingAuth || this.purchaseAuth || this.purchaseReportAuth
      }
    },
    onShow() {
      this.salesDetailAuth = false
      this.loggingAuth = false
      this.purchaseAuth = false
      this.salesReportAuth = false
      this.purchaseReportAuth = false
      this.purlist = []
      this.saleslist = []
      this.getDashboardAuth();
    },
    methods: {
      async getDashboardAuth() {
        this.loggingAuth = await getButtonShow('procurement-transportation-dashboard');
        this.purchaseAuth = await getButtonShow('pro-adjust-dashboard');
        this.salesDetailAuth = await getButtonShow('sales-detail-auth');
        this.salesReportAuth = await getButtonShow('procureSales:sales-report');
        this.purchaseReportAuth = await getButtonShow('procureSales:purchase-report');
        if (this.purchaseAuth) {
          this.purlist.push({
            url: config.baseImgUrl + '/board.png',
            path: 'dashboard',
            title: '采调看板'
          })
        }
        if (this.loggingAuth) {
          this.purlist.push({
            url: config.baseImgUrl + '/transport.png',
            path: 'purchaseTransport',
            title: '采运系统'
          })
        }
        if (this.purchaseReportAuth) {
          this.purlist.push({
            url: config.baseImgUrl + '/purchase-report.png',
            path: 'purchaseReport',
            title: '采购报表'
          })
        }
        if (this.salesDetailAuth) {
          this.saleslist.push({
            url: config.baseImgUrl + '/salesDetail.png',
            path: 'salesDetailReport',
            title: '销售明细报表'
          })
        }
        if (this.salesReportAuth) {
          this.saleslist.push({
            url: config.baseImgUrl + '/sale-report.png',
            path: 'saleReport',
            title: '销售报表'
          })
        }
      },
      salesClick(path) {
        this.$tab.navigateTo(`/packageA/pages/${path}/index`);
      },
      purClick(path) {
        this.$tab.navigateTo(`/packageA/pages/${path}/index`);
      }
    }
  }

</script>

<style lang="scss" scoped>
  .container {
    padding: 10px;
  }

  .module {
    border: 0px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    background-color: #f9f9f9;
  }

  .module+.module {
    margin-top: 10px;
  }

  .module-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    margin-left: 5px;
  }

  .grid-image {
    padding-top: 20px;
    width: 60px;
    /* 图片宽度占满整个单元格 */
    height: 74px;
    /* 高度自适应 */
  }

  .sale-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    >view {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }
  }

  .purches-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    >view {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }
  }

  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 150px;

    >image {
      width: 200px;
      height: 106px;
    }

    >view {
      margin-top: 20px;
    }
  }
</style>